<template>
  <van-card
    desc="*1"
    :title="info.prizeName"
    :thumb="info.prizePoster?info.prizePoster:info.poster"
    :price="info.price?(info.price/100).toFixed(2):null"
  ></van-card>
</template>

<script>
import { Card } from "vant";

export default {
  name: "CommodityItem",
  components: {
    [Card.name]: Card,
  },
  props: {
    boxInfo: {
      rype: Object,
      default: () => {},
    },
  },
  watch: {
    boxInfo: {
      immediate:true,
      deep: true,
      handler: function (newVal) {
        this.info = newVal;
      },
    },
  },
  data() {
    return {
      info: {},
    };
  },
  created() {
    this.info = this.boxInfo;
  },
  methods: {},
};
</script>

<style scoped lang="less">
.van-card {
  background: #fff;
  padding: 24px;

  .van-card__thumb {
    width: 172px;
    height: 172px;
    margin-right: 24px;
    border-radius: 8px;
  }

  .van-card__title {
    font-size: 30px;
    font-weight: 500;
    color: #222222;
    line-height: 42px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .van-card__desc {
    font-size: 30px;
    color: #888888;
    line-height: 42px;
    max-height: 42px;
  }

  .van-card__price,
  .van-card__price-decimal,
  .van-card__price-integer {
    font-size: 30px;
    font-weight: 500;
    color: #df5438;
    line-height: 42px;
  }
}

.van-card:not(:first-child) {
  margin: 0;
}
</style>
